<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="resource/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>1</div>
    <div>3</div>
    <ul>
        <li>
            <b></b>
        </li>
        <li></li>
        <li>1</li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <b>阿萨达</b>
    </ul>
    <ul>
        <li></li>
        <b>萨达</b>
    </ul>
    <ul>
        <b>gsfds</b>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>123</ul>
    <ul></ul>
    <ul></ul>
    <script>
        // 匹配包含指定文本的元素
        $("div:contains('1')").css('color','red');
        // 匹配所有不包含子元素和文本内容的空元素
        $("li:empty").css('color','yellow');
        // 匹配包含li元素的元素
        $("ul:has(li)").css('color','pink');
        // 匹配包含子元素或文本的元素
        $("ul:parent").css('color','purple');
    </script>
    <div style="display:none">646</div>
    <span style="display:none">123</span>
    <script>
        // 匹配所有不可见的元素或者type为hidden的元素
        $("span:hidden").css('display','block');
        $("div:hidden").css('display','block');
        // 匹配所有可见的元素
        $("body:visible").css('display','none');
    </script>
</body>
</html>